<template>
    <div class="xiangqing">
      <!-- 头部标题 -->
      <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
  
      <!-- 图片区域 -->
      <div class="pic">
        <img src alt />
      </div>
  
      <!-- 描述信息 -->
      <div class="info">
        <!-- 名字 -->
        <p class="house">{{houseName}}</p>
        <!-- 标签 -->
        <van-tag type="primary" size="medium" color="#e1f5f8" text-color="#39becd">{{biaoqian}}</van-tag>
        <!-- 价格房型面积 -->
        <div class="parameter">
          <!-- 价格 -->
          <div class="price">
            <h1>
              {{price}}
              <span>/月</span>
            </h1>
            <span>租金</span>
          </div>
          <!-- 户型 -->
          <div class="price">
            <h1>{{fangxing}}</h1>
            <span>房型</span>
          </div>
          <!-- 面积 -->
          <div class="price">
            <h1>{{mianji}}</h1>
            <span>面积</span>
          </div>
        </div>
        <!-- 细节信息 -->
        <div class="particulars">
          <div>
            <p>装修：</p>
            <i>{{zhuangxiu}}</i>
          </div>
          <div>
            <p>朝向：</p>
            <i>{{chaoxiang}}</i>
          </div>
          <div>
            <p>楼层：</p>
            <i>{{louceng}}</i>
          </div>
          <div>
            <p>类型：</p>
            <i>{{leixing}}</i>
          </div>
        </div>
      </div>
      <!-- 小区地图 -->
      <div class="map">
        <p>小区：{{xiaoqu}}</p>
        <div class="ditu"></div>
      </div>
      <!-- 房屋配套 -->
      <div class="peitao">
        <p class="title">房屋配置</p>
        <div class="fangwupeizhi">
          <div v-for="item in housePeizhi" :key="item.name" class="list">
            <van-icon class="iconfont" class-prefix="icon" :name="item.icon"></van-icon>
            <span>{{item.name}}</span>
          </div>
        </div>
      </div>
  
      <!-- 房源概括 -->
      <div class="peitao jieshao">
        <p class="title">房源概括</p>
        <div class="user">
          <!-- 左边 -->
          <div class="left">
            <div class="img">
              <img src alt />
            </div>
            <!-- 姓名 -->
            <div class="name">
              <p>汪女士</p>
              <van-icon name="shield-o" />
              <i>已认证房主</i>
            </div>
          </div>
          <!--  按钮-->
          <van-button plain type="primary">发消息</van-button>
        </div>
        <div
          class="text"
        >1.周边配套齐全，地铁四号线陶然亭站，交通便利，公交云集，距离北京南站、西站都很近距离。 2.小区规模大，配套全年，幼儿园，体育场，游泳馆，养老院，小学。 3.人车分流，环境优美。 4.精装两居室，居家生活方便，还有一个小书房，看房随时联系。</div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="peitao">
        <p class="title">猜你喜欢</p>
      </div>
      <!--列表  -->
      <div class="lists" v-for="item in liebiao" :key="item.title" @click="tiaozhuan">
        <div class="pic">
          <img :src="url+item.houseImg" alt />
        </div>
        <div class="text">
          <p class="title">{{item.title}}</p>
          <span>{{item.desc}}</span>
          <div class="biaoqian">{{item.tags[0]}}</div>
          <div class="price">
            <span>{{item.price}}</span>元/月
          </div>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="button">
        <button class="onebtn">
          <van-icon name="star-o" />收藏
        </button>
        <button class="twobtn">在线咨询</button>
        <button class="threebtn">电话预约</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'HkHouseCollect',
  
    data () {
      return {
        // !要修改的数据
        title: '富力广场D区域',
        houseName: '名字',
        biaoqian: '近地铁',
        price: '1600',
        fangxing: '一室',
        mianji: '1120平方',
        zhuangxiu: '精装',
        chaoxiang: '东',
        louceng: '高楼层',
        leixing: '普通住宅',
        xiaoqu: '天山星城',
        // 房子配置
        housePeizhi: [
          { name: '衣柜', icon: 'yigui' },
          { name: '洗衣机', icon: 'xiyiji' },
          { name: '空调', icon: 'kongtiao' },
          { name: '天然气', icon: 'tianranqi' },
          { name: '冰箱', icon: 'bingxiang' },
          { name: '暖气', icon: 'nuanqi' },
          { name: '电视', icon: 'dianshi' },
          { name: '热水器', icon: 'hotshui' },
          { name: '宽带', icon: 'wifi' },
          { name: '沙发', icon: 'shafa' }
        ],
        url: '',
        // 列表数据
        liebiao: []
      }
    },
  
    mounted () {},
  
    methods: {
      // *左侧返回键
      onClickLeft () {
        this.$router.back()
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .xiangqing {
    background-color: #f6f5f6;
    margin-bottom: 50px;
  }
  // todo头部
  /deep/.van-nav-bar__content {
    background-color: #21b97a;
  }
  // 标题颜色
  /deep/.van-ellipsis {
    color: #fff;
    font-size: 18px;
  }
  // 右侧退出icon颜色
  /deep/.van-nav-bar__left {
    i {
      color: #fff;
      font-size: 18px;
    }
  }
  // todo 图片
  .pic {
    width: 375px;
    height: 252px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  // todo 描述信息
  .info {
    width: 375px;
    height: 266px;
    padding: 15px;
    background-color: #fff;
    // *名称
    .house {
      font-size: 16px;
      margin: 16px 0;
      color: #333333;
    }
    // *价格大小参数
    .parameter {
      width: 345px;
      height: 84px;
      margin: 15px 0;
      padding: 15px 0;
      border-top: 1px solid #cecece;
      border-bottom: 1px solid #cecece;
      display: flex;
      justify-content: center;
      align-items: center;
      // 价格
      .price {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        h1 {
          color: #fa5741;
          font-size: 18px;
          span {
            color: #fa5741;
            font-size: 12px;
          }
        }
        span {
          color: #999;
          font-size: 14px;
        }
      }
    }
    // *详情配置
    .particulars {
      display: flex;
      flex-wrap: wrap;
      div {
        display: flex;
        width: 168.5px;
        font-size: 13px;
        p {
          color: #999;
          padding-right: 5px;
        }
        i {
          color: #333333;
        }
      }
    }
  }
  
  // todo 地图
  .map {
    margin-top: 15px;
    width: 375px;
    height: 189px;
    background-color: #fff;
    p {
      margin: 0 11.5px;
      font-size: 14px;
      height: 44px;
      display: flex;
      align-items: center;
    }
    .ditu {
      width: 375px;
      height: 145px;
      background-color: #a3cfff;
    }
  }
  
  // todo 房屋配置
  .jieshao {
    margin-bottom: 15px;
  }
  .peitao {
    padding: 0 10px;
    background-color: #fff;
    .title {
      font-weight: 700;
      color: #333333;
      font-size: 14px;
      padding: 15px 0;
      background-color: #fff;
      border-bottom: 1px solid #eeeeee;
    }
    .fangwupeizhi {
      width: 355px;
      height: 182px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-wrap: wrap;
      background-color: #fff;
      .list {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column;
        color: #333;
        font-size: 14px;
        .iconfont {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          font-size: 23px;
          width: 71px;
          height: 51px;
        }
      }
    }
    // todo 房屋概况
    .user {
      margin-top: 15px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          margin: 10px 15px 0 0;
          width: 52px;
          height: 52px;
          background-color: red;
          border-radius: 100%;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          font-size: 14px;
        }
        i {
          margin-top: 5px;
          font-size: 12px;
          color: #fa5741;
        }
        .van-icon-shield-o {
          font-size: 16px;
          margin-right: 5px;
        }
      }
      button {
        width: 74px;
        height: 29px;
        margin-right: 15px;
      }
    }
    .text {
      width: 355px;
      height: 132px;
      font-size: 14px;
      padding: 10px 0;
    }
    // todo 猜你喜欢
    .lists {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #999;
      margin-left: 15px;
      width: 345px;
      height: 120px;
      .pic {
        width: 106px;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 12px;
        .title {
          font-size: 15px;
          font-weight: 700;
          color: #333;
        }
        span {
          font-size: 12px;
          color: #b7b9ba;
        }
        .biaoqian {
          font-size: 12px;
          width: 46px;
          height: 20px;
          background-color: #e1f5f8;
          color: #52c5d3;
          text-align: center;
        }
        .price {
          font-size: 12px;
          color: #fa705d;
          span {
            font-size: 16px;
            color: #fa705d;
            font-weight: 700;
          }
        }
      }
    }
  }
  // todo 按钮
  .button {
    width: 375px;
    height: 50px;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    font-size: 17px;
    color: #999999;
    display: flex;
    .onebtn {
      flex: 1;
      border-top: 1px solid #cecece;
      border-right: 1px solid #cecece;
      background-color: #fff;
    }
    .twobtn {
      flex: 1;
      border-top: 1px solid #cecece;
      background-color: #fff;
    }
    .threebtn {
      flex: 1;
     background-color: #21b97a;
     color: #fff;
  
    }
  }
  </style>
  